<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image图像对象</title>
</head>
<body>
<h1>输出图片基本信息和大小控制及边框</h1>
<form action="" name="form1">
<img src="images/box.png" width="200px" height="300px" border="3" /> <br>
<input type="button" value="-缩窄" onclick="chanimages(`small`)"/>
<input type="button" value="+加宽" onclick="chanimages(`big`)"/>
<input type="text" name="bb" />
<input type="button" value="添加边框" onclick="chanborder()" />
</form>
<script>
document.writeln(`图片名称：`+document.images[0].name);
document.writeln(`<br>图片宽度：`+document.images[0].width);
document.writeln(`<br>图片高度：`+document.images[0].height);
document.writeln(`<br>图片边框：`+document.images[0].border);
document.writeln(`<br>图片url：`+document.images[0].src);
function chanimages(ms) {
    if (ms==`small`) {
        document.images[0].width=document.images[0].width*0.8;
    }else if (ms==`big`) {
        document.images[0].width=document.images[0].width*1.3;
    }
}
function chanborder() {
    let bor=form1.bb.value;
    document.images[0].border=bor;
}
</script>

<h1>onMoseOver指向鼠标时切换</h1>
<img src="images/box2.png" width="200px" height="300px" border="3" id="pics" onmouseover="换图呼(`pic1`)" onmouseout="换图呼(`pic2`)" onclick="换图呼(`pic3`)" 删除有效果onclick="换图呼(`pic4`)" />
<script>
function 换图呼(aa) {
    if (aa==`pic1`) {
    document.images[`pics`].src=`images/box.png`;
    }
    if (aa==`pic2`) {
    document.images[`pics`].src=`images/box2.png`;
    }
    if (aa==`pic3`) {
    document.images[`pics`].width=document.images[`pics`].width*1.2;
    }
    if (aa==`pic4`) {
        if (document.images[`pics`].width==`200`) {
            document.images[`pics`].width=`300`;
        } else {
            document.images[`pics`].width=`200`;
        }
    }

}
</script>













</body>
</html>